<template>
	<view class="container">
		<view class="content upload-box">
			<view class="title">
				问题描述
			</view>
			<textarea class="textarea" v-model="params.content" placeholder-style="color: #778899"
				placeholder="请填写您的问题描述以便我们提供更好的帮助" />
			<view class="img-title">
				问题截图(选填,最多3张)
			</view>
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple width="200" height="200"
				:maxCount="3"></u-upload>
		</view>
		<view class="box">
			<view class="title">
				请留下您的联系电话
			</view>
			<view class="tel-box">
				<view class="label">
					手机号码
				</view>
				<input type="number" v-model="params.mobile" class="input" />
			</view>
		</view>
		<view class="footer">
			<view class="btn" @tap="submit">
				提交
			</view>
			<view class="tips">
				温馨提示:
			</view>
			<view class="tips">
				若未解决问题,可联系在线客服
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick,
		computed
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin,
		usePaginatedList
	} from "@/common"
	const params = ref({
		content: '',
		mobile: '',
		pictures: '',
		questionId: ''
	})
	onLoad((options) => {
		if (options.id) {
			params.value.questionId = Number(options.id)
		}
	})
	onShow(() => {

	})
	const fileList = ref([]);

	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
		console.log(fileList.value, 'fileList.value')
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: `${import.meta.env.VITE_BASE_URL}/api/file/upload`, // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					['token']: uni.getStorageSync('token')
				},
				success: (res) => {
					let fileRes = JSON.parse(res.data)
					console.log(fileRes)
					if (fileRes.code == 200) {
						resolve(fileRes.result)
					}
				},
			});
		});
	};

	function submit() {
		if (!params.value.content) {
			uni.showToast({
				title: '请输入问题描述!',
				icon: 'none'
			})
			return
		}
		if (!params.value.mobile) {
			uni.showToast({
				title: '请填写联系方式!',
				icon: 'none'
			})
			return
		}
		if (fileList.value.length > 0) {
			params.value.pictures = fileList.value.map(item => item.url).join(',')
		}
		$http.post("userFeedback", params.value).then(res => {
			uni.showToast({
				title: '感谢您的反馈!',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F9F9F9;
		padding: 20rpx;

		.content {
			background-color: #fff;
			padding: 30rpx 20rpx;

			.title {
				font-size: 38rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.textarea {
				width: 100%;
				height: 250rpx;
				padding: 20rpx;
				background-color: #F8F9FB;
			}

			.img-title {
				color: #778899;
				margin: 20rpx 0;
			}
		}

		.box {
			background-color: #fff;
			padding: 30rpx 20rpx;
			margin-top: 20rpx;

			.title {
				font-size: 38rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.tel-box {
				display: flex;
				align-items: center;
				background-color: #F8F9FB;
				color: #778899;
				padding: 26rpx;

				.input {
					width: 400rpx;
					margin-left: 10rpx;
				}
			}
		}

		.footer {
			padding: 40rpx 50rpx;

			.btn {
				height: 70rpx;
				margin: 0rpx auto 20rpx auto;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #1667EA;
				color: #fff;
				font-size: 32rpx;
			}

			.tips {
				color: #778899;
				line-height: 1.8;
				font-size: 26rpx;
			}
		}
	}
</style>